<style lang='less' >
.weui-cells.vux-no-group-title {
  margin-top: 0px!important;
}
.weui-label{
  width:100px!important;
}

</style>

<template>
  <div class="pages index">
    <form action="">
        <div v-for="(item,index) in items">
          <group>
            <x-input title="title" v-if='item.type=="input"' :required="item.required" :type='item.valueType' :placeholder='item.message' :max='item.max' :title='item.title' v-model="dataModel[index].rr"></x-input>
          </group>
          <group v-if='item.type=="rater"' >
            <cell :title='item.title'>
              <rater v-model="dataModel[index].rr"  :star="item.star" :font-size='item.fontSize' :margin='item.margin' :max="item.max" active-color="red"></rater>
            </cell>
          </group>
         <group  v-if='item.type=="radio"' :title='item.title'>
            <radio  :options="item.options" v-model="dataModel[index].rr"></radio>
          </group>
          <group  v-if='item.type=="check"' :title="item.title">
            <checklist :key="item.id" :options="item.objectList" v-model="dataModel[index].rr" :max='item.max'></checklist>
          </group>
          <group  v-if='item.type=="textarea"' :title="item.title">
            <x-textarea  v-model="dataModel[index].rr" :placeholder='item.message' :autosize='item.autosize' :show-counter='item.counter'  :max='item.max'></x-textarea>
          </group>
        </div>
        <box gap="10px 10px"> 
          <x-button type="primary"  action-type="button" @click.native="submitClick" text='提交'></x-button>
        </box>
    </form>
  </div>
</template>
<script>
  import { XInput ,XButton,Divider,Rater, Group ,Box, Cell,XTextarea , Radio,Checklist} from 'vux'
  import qs from 'Qs'
  export default {
    name:'index',
    components:{
      XInput,
      Cell ,
      Divider,
      Rater,
      XTextarea,
      Box,
      Checklist,
      XButton,
      Radio ,
      Group
    },
    data (){
      return {
        dataModel:[],
        form:{},
        userid:this.$route.params.userid,
        items: [
          {id:'001',name:'name',message: '请输入姓名',title: '姓名' ,type:'input',required:true},
          {id:'006',name:'username',message: '请输入用户名',title: '用户名' ,type:'input',valueType:'text',max:10,required:true},
          {id:'007',name:'pwd',message: '请输入密码',title: '密码' ,type:'input',valueType:'password',max:20,required:true},
          {id:'002',name:'age',message: '请输入年龄',title: '年龄' ,type:'input' ,valueType:'number',max:3,required:true},
          {id:'003',name:'sex',options:['男', '女'],title: '性别' ,type:'radio',required:true },
          {id:'005',name:'hunfou',options:['已婚', '未婚'],title: '婚否' ,type:'radio',required:true },
          {id:'004',name:'aihao',message: '请选择爱好',objectList: [{key: '1', value: '写代码'}, {key: '2', value: '秀恩爱'},
           {key: '3', value: '做老婆饼'}],max:2,title: '爱好（最多选择两项）' ,type:'check',required:true },
          {id:'008',name:'yijian',message: '请输入您的意见',title: '意见' ,type:'textarea',max:250,counter:true,autosize:true,required:true},
          {id:'010',name:'pingjia',message: '请做出评价',title: '请做出评价', max: 5, star:'❀',fontSize:30,margin:5,required:true,type:'rater'}
        ]
      }
    },
    created(){
      var len = this.items.length;
      for (var i = 0; i < len; i ++) {
          var name = this.items[i].name;
          var id = this.items[i].id;
          if(this.items[i].type=='check'){
            var item = {rr: [],name:name,id:id};
          }else if(this.items[i].type=='rater'){
            var item = {rr: 0,name:name,id:id};
          }else{
            var item = {rr: "",name:name,id:id};
          }
          this.dataModel.push(item);
      }
    },
    methods: {
      submitClick: function(event){
        for(var i=0;i<this.dataModel.length;i++){
          this.form[this.dataModel[i].name]=this.dataModel[i].rr
          if(this.items[i].required && this.items[i].required != undefined){
            if(this.dataModel[i].rr ==''){
              this.$vux.toast.show({
                type:'text',
						    width:'70%',
                text: this.items[i].message || this.items[i].title
              })
              return false;
            }
          }
        }

        //console.log(this.dataModel)
        var forms = JSON.stringify(this.form)
        console.log(this.form.name,forms )
            var that = this;
        this.$http.post('http://192.168.1.65:3000/login',qs.stringify({userid:this.userid,form:forms})).then((response) => {
						var datas = response.data;
						// console.log(datas)
            if(datas.status=='success'){
              this.$vux.toast.show({
                type:'text',
                width:'70%',
                text: datas.message
              })
              setTimeout(function(){
                that.$router.push({path:'/success/'+that.userid});
							},1800)
            }
					}, (response) => {
						this.$vux.toast.show({
							type:'text',
							width:'70%',
							text: '后台错误'
						})
					}); 
      }
    }
  }
</script>